<!--移除用户-->
<!--移除用户-->
<template>
  <div id="table">
    <el-autocomplete
      class="inline-input"
      id="search"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @change="handleSelect"
      @select="handleSelect"
    ></el-autocomplete>
   
    <el-table
      :data="pagination"
      style="width: 100%"
      v-if="!state2"
      @row-click="del"
      >
      <el-table-column
          prop="id"
          label="编号"
          width="130"
          sortable
          column-key="id"
          >
        </el-table-column>
      <el-table-column
        prop="userName"
        label="用户名"
        width="130"
        sortable
        column-key="UserName"
        >
      </el-table-column>

      <el-table-column
        prop="realName"
        label="真实姓名"
        sortable
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="tel"
        sortable
        label="电话">
      </el-table-column>
      <el-table-column
        prop="email"
        sortable
        label="电子邮件">
      </el-table-column>
      <el-table-column
        prop="userPwd"
        sortable
        label="密码">
      </el-table-column>
      <el-table-column>
        <el-button type="danger" icon="el-icon-delete" circle
        @click="del"
        ></el-button>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems"
        v-if="!state2"
        >
      </el-pagination>

    <el-table
      :data="pagination"
      style="width: 100%"
      v-else
      @row-click="del"
      >
      <el-table-column
          prop="id"
          label="编号"
          width="130"
          sortable
          column-key="id"
          >
        </el-table-column>
      <el-table-column
        prop="userName"
        label="用户名"
        width="130"
        sortable
        column-key="UserName"
        >
      </el-table-column>
      <el-table-column
        prop="realName"
        label="真实姓名"
        sortable
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="tel"
        sortable
        label="电话">
      </el-table-column>
      <el-table-column
        prop="email"
        sortable
        label="电子邮件">
      </el-table-column>
      <el-table-column
        prop="userPwd"
        sortable
        label="密码">
      </el-table-column>
      <el-table-column>
        <el-button type="danger" icon="el-icon-delete" circle
        @click="del"
        ></el-button>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleNewSizeChange" @current-change="handleNewCurrentChange" :current-page="currenNewPage"
      :page-sizes="pageNewSizes" :page-size="pageNewSize" layout="total, sizes, prev, pager, next, jumper"
      :total="totalNewItems"
      v-if="state2"
      >
    </el-pagination>
    
  </div>
  
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      searchtable: [],
      pagination: [],
      currentPage: 1,
      // 分页的分界线
      start: 0,
      end: 10,
      pageSize: 6, // 每页显示的条目数量
      totalItems: 0, // 数据库中条目数量
      pageSizes: [6, 8, 10, 20] ,// 每页显示条目数量的选项

      currentNewPage: 1,
      Newstart: 0,
      Newend: 10,
      pageNewSizes: [6, 8, 10, 20],
      pageNewSize: 6,
      totalNewItems:0,

      restaurants: [],
      state2: '',
      tableData: [],
      
    }
  },
  methods:{
    handleSelect() {
      this.searchtable = this.tableData.filter(item => {
          return String(item.id) === this.state2
      })
      if(this.state2 == '')
          this.searchtable = this.tableData
      this.searchpage()
    },
    async del(row) {
      const id = row.id
      let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
      const config = {
              headers: {
                  // 设置内容类型为JSON
                  'Content-Type': 'application/json;charset=UTF-8',
                  // 添加token到请求头
                  'token': user.token || '',
              }
          }
        //this.$request.delete('/user/${id}').then(res => {
            const res = await axios.delete(`http://127.0.0.1:8000/user/${id}`,config)
            console.log(res)
            //this.$request.get('/user').then(res1 => {
            const res1 = await axios.get('http://127.0.0.1:8000/user',config)
            this.tableData = res1.data.data
            this.fetchData()
            //})
        
        //
    },
    filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
    },
    createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },
    loadAll() {
        return [
        
        ]
      },
    fetchData () {
      this.start = (this.currentPage - 1) * this.pageSize
      this.end = this.start + this.pageSize
      this.pagination = this.tableData.slice(this.start, this.end)
      this.totalItems = this.tableData.length;
      this.totalNewItems = this.tableData.length;
      if(this.pagination.length / this.pageSize + 1 <= this.currentPage)
        this.currentPage--        
    },
    searchpage(){
    this.Newstart = (this.currentNewPage - 1) * this.pageNewSize
    this.Newend = this.Newstart + this.pageNewSize
    this.pagination = this.searchtable.slice(this.Newstart, this.Newend)
    this.totalNewItems = this.searchtable.length;
    if(this.pagination.length / this.pageNewSizes + 1 <= this.currentNewPage)
        this.currentNewPage--
  },
    handleSizeChange (newSize) {
      this.pageSize = newSize
      this.fetchData() // 更新每页显示的条目数量后重新请求数据
    },
    handleCurrentChange (newPage) {
      this.currentPage = newPage
      this.fetchData() // 更新当前页数后重新请求数据
    },
    handleNewSizeChange (newSize) {
    this.pageNewSize = newSize
    this.searchpage() // 更新每页显示的条目数量后重新请求数据
  },
    handleNewCurrentChange (newPage) {
      this.currentNewPage = newPage
      this.searchpage() // 更新当前页数后重新请求数据
  },
  },
  mounted() {
      this.restaurants = this.loadAll();
    },
  async created(){
      let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
      const config = {
          headers: {
              // 设置内容类型为JSON
              'Content-Type': 'application/json;charset=UTF-8',
              // 添加token到请求头
              'token': user.token || '',
          }
      }
      //this.$request.get('/user').then(res => {
    const res = await axios.get('http://127.0.0.1:8000/user',config)
      if (res.data.code == '401')
          this.$router.push('/')
    this.tableData = res.data.data
    this.fetchData()
  }
}
</script>

<style>
  #search{
    width: 600px;
    position: fixed;
    left: auto;
    top: 80px;
  }
  #table{
    line-height: 50px;
  }
  #searchicon{
    position: fixed;
    left: 1300px;
    top: 80px;
  }
</style>